<template>
  <div id="member-address-form-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberAddressList')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>地址{{ actName }}</span>
    </div>

    <el-form style="width: 95%; margin: 0 auto;"
             :style="{
      paddingTop:(this.getSafeArea().top+5)+'px'
             }"
             :model="form"
             v-loading="isLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             :rules="rules"
             ref="ruleForm" label-width="80px"
          class="address-form">
      <el-form-item label="收货人:" prop="name">
        <el-input type="text" v-model="form.name" @change="changeFormItem('name')"></el-input>
      </el-form-item>
      <el-form-item label="手机号码:" prop="mobile">
        <el-input type="text" v-model="form.mobile" @change="changeFormItem('mobile')"></el-input>
      </el-form-item>
      <el-form-item label="地址:" prop="address" style="line-height: 20px;">
<!--        <area-select type="all" :level="2" v-if="pcaa[86] && form.address && form.address.length===3" :data="pcaa" v-model="form.address" style="position: relative; left: -10px;"></area-select>-->
        <span v-text="form.province+','+form.city+','+form.county" @click="goToAMap()"></span>
        <i class="el-icon-location"  @click="goToAMap()"></i>
      </el-form-item>
      <el-form-item label="详细地址:" prop="address">
        <el-input type="textarea"  v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="默认地址:" prop="isDefault">
        <el-switch v-model="form.isDefault"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" style="width: 70%" @click="submit('numberValidateForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "MemberAddressForm",
  mounted() {
    if (this.$route.query.type){
      this.actType=this.$route.query.type
      if (this.actType==='create'){
        this.actName='新增'
        // this.form.address=this.getAddressCodeByName("陕西省,西安市,雁塔区".split(","))
        this.form.province='陕西省'
        this.form.city='西安市'
        this.form.county='雁塔区'
      }
      if (this.actType==='update'){
        this.actName='更新'
        // this.form=demoData.address
        this.getDetail(this.getMapData)
      }

      if (this.$route.query.setMapData && this.$route.query.mapDataString){
        this.getMapData();
      }
    }else {
      this.actType='create'
      this.actName='新增'
      this.getMapData();
    }

    if (localStorage.getItem('AddressForm_name')){
      this.form.name=localStorage.getItem('AddressForm_name')
    }
    if (localStorage.getItem('AddressForm_mobile')){
      this.form.mobile=localStorage.getItem('AddressForm_mobile')
    }
  },
  data: function () {
    return {
      isLoading:false,
      actType:'create',
      actName:'新增',
      pcaa:{},
      form: {
        id:0,
        name:'',
        mobile:'',
        province:'',
        city:'',
        county:'',
        location:'',
        // address:this.getAddressCodeByName("陕西省,宝鸡市,岐山县"),
        address:'',
        isDefault:false,
      },
      rules: {
        name: [
          {required: true, message: '请输入 收货人', trigger: ['blur','change']},
          {min: 2,max:6, message: '长度在 2~6 个字符之间', trigger: ['blur','change']}
        ],
        mobile: [
          {required: true, message: '请输入 手机号码', trigger: ['blur','change']},
          {min: 11,max:11, message: '必须符合手机号码格式', trigger: ['blur','change']}
        ],
        address: [
          {required: true, message: '请输入 详细地址', trigger: ['blur','change']},
          {min: 5,max:50, message: '长度在 5~50 个字符之间', trigger: ['blur','change']}
        ],
      }
    }
  },
  methods: {
    changeFormItem:function (field) {
      localStorage.setItem('AddressForm_'+field,this.form[field])
    },
    goToAMap:function () {
      var queryParams={}
      if (this.form.location){
        queryParams.location=this.form.location
      }
      if (this.form.province){
        queryParams.province=this.form.province
        queryParams.city=this.form.city
        queryParams.county=this.form.county
        queryParams.address=this.form.address
      }
      localStorage.setItem('MyAMapFromDataString',JSON.stringify({
        name:this.$route.name,
        query:this.$route.query?this.$route.query:{},
      }))
      this.$router.push({
        name:"MyAMap",
        query:queryParams
      })
    },
    // 获取地图回传数据
    getMapData:function () {
      if (!this.$route.query.mapDataString || !this.$route.query.mapDataString.length){
        return
      }
      var mapData=JSON.parse(decodeURI(this.$route.query.mapDataString))
      this.form.county=mapData.county
      this.form.city=mapData.city
      this.form.province=mapData.province
      this.form.location=mapData.location
      this.form.address=mapData.address
      this.$forceUpdate()
      console.log('mapData',mapData)
    },
    // 获取地址详情
    getDetail:function (callback) {
      var $this = this
      $this.MyRequest($this.ApiDoNameShop+'ShopAddress/getDetail', {id:this.$route.query.id}, function (data) {
        // $this.handlerAddress(data)
        $this.form.id=data.id
        $this.form.name=data.name
        $this.form.mobile=data.mobile
        $this.form.county=data.county
        $this.form.city=data.city
        $this.form.province=data.province
        $this.form.location=data.location
        $this.form.address=data.address
        $this.$forceUpdate()
        if (typeof callback==='function'){
          callback()
        }
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 提交新增/修改
    submit: function () {
      var $this = this
      $this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var form=Object.assign({},$this.form)
          form.isDefault=form.isDefault?1:0
          // form.address=$this.getAddressArr(form.address)
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameShop+'ShopAddress/'+$this.actType, form, function (insertAddressId) {
            $this.isLoading = false
            $this.successTip($this.actName+"成功")
            localStorage.removeItem('AddressForm_name')
            localStorage.removeItem('AddressForm_mobile')
            // 回调-地址列表
            setTimeout(function () {
              var queryParams={}
              // 判断来源参数
              if ($this.$route.query.from){
                queryParams.from=$this.$route.query.from
              }

              // 确认订单,选择地址
              if (queryParams.from==='chooseAddress'){
                var confirmPageParams = JSON.parse(localStorage.getItem("ConfirmOrderUrl"))
                confirmPageParams.query.chooseAddressId=insertAddressId
                $this.$router.push(confirmPageParams)
                return;
              }
              $this.$router.push({name:'MemberAddressList',query:queryParams})
            },500)

          }, function (msg) {
            $this.isLoading = false
            $this.$message.error(msg)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取地址数组
    getAddressArr:function (addressArr) {
      var arr=[]
      addressArr.forEach(function (value, key) {
        var keyArr = Object.keys(value);
        arr.push(value[keyArr[0]])
      })
      return arr.join(',')
    },
  }
}
</script>

<style>
.area-select span.area-selected-trigger{
  padding-top: 2px;
}
.area-select-wrap .area-select{
  margin-top: 3px;
}
.area-select.medium{
  width: 100px;
}
.address-form .el-form-item__label{
  font-size: 13px;
}
</style>
